<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第一步移入 -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 第三步  表示vue 在这个元素里面生效   vue代码生效的范围 -->
    <div id='app'  class="app">
   <!-- 第四步 双大括号渲染数据 -->
        {{msg}}

        <div>{{count}}</div>
        <div>{{count+2}}</div>
        <div  @click='dianji'>{{count%2==0?'偶数':'奇数'}}</div>



    </div>
    
    <script>
        // 第二步
         let vm= new  Vue({
             el:'.app',   // 表示vue代码 表达式挂载在哪个dom元素身上 
             data:{
                 msg:'hello vue xxxxx',
                 count:5
             },
             methods:{
                dianji() {
                    alert('我被点击了')
                }
             }
         })

    </script>


</body>
</html>